<template>
  <div class="modal-form-container">
    <Table
      :loading="loading"
      :columns="columns"
      :data="data"
    >
    </Table>
  </div>
</template>

<script>
import { getRechargeByCardId } from '@/api/data2'

export default {
  name: 'record_form_info',
  props: {
    selectCardId: String
  },
  data () {
    return {
      loading: false,
      columns: [
        {
          title: this.$t('o9MoZ8GYpy_bxl_Uh62i0'),
          key: 'cardid',
          width: 150
        },
        {
          title: this.$t('80RpzyHfrhmRj77N-dwCX'),
          key: 'rechargetime',
          width: 250
        },
        {
          title: this.$t('OgCXwvjA3Bh7NoI3335mj'),
          key: 'rechargemoney',
          width: 200
        },
        {
          title: this.$t('fWR__wDWaiHLQYablcbDu'),
          key: 'rechargebeforemoney',
          width: 200
        },
        {
          title: this.$t('VS44osdhM-QYfHxOIxOuE'),
          key: 'rechargeaftermoney',
          width: 200
        },
        {
          title: this.$t('aWE0A8HStCgsdlLI3BDTA'),
          key: 'rechargeoperator',
          width: 200
        }
      ],
      data: []
    }
  },
  mounted () {
    this.queryTable()
  },
  watch: {
    selectCardId () {
      this.queryTable()
    }
  },
  methods: {
    async queryTable () {
      if (_.isNil(this.selectCardId)) return
      this.loading = true
      const { code, data, desc } = await getRechargeByCardId({
        cardid: this.selectCardId + ''
      })
      if (code == 200) {
        this.data = data.datalist || []
      } else {
        this.$Message.error(desc)
      }
      this.loading = false
    }
  }
}
</script>
